So far, we've been looking at the typographical aspects of style sheets, more or less. Now its time to take a look at the page layout side of CSS.
Style sheets introduce the ability to place elements anywhere on a page, but in practice, the current browsers don't support this positioning all that well.
That subject is beyond the scope of this series of lessons, but there is more to layout than just positioning elements. For more on positioning, as well as a short hands on exercise, see our tutorial on positioning with CSS2.
Well designed publications look professional for a number of reasons. One of them is the use of whitespace (or neutral space). This breaks up the information on a page for legibility. Good use of neutral space (typically margins, the space between paragraphs and headings, as well as the use of indenting) makes information more readable. It draws the user's eye toward the most significant information (headings), and to logically related "chunks".
In this lesson we are going to develop rules that apply these layout aspects to our page.
Typically, the text on a page is framed by a margin. On web pages, until now, we either made use of tables to create a margin (very very bad), or put up with the default margins as built into the browser.
Style sheets let us set a margin on any element. This margin is the space between the element, and the edge of the element which adjoins it. For headings and paragraphs, and other so called "block elements" this will usually be the body. So effectively you will be setting the distance between the element and the edge of the page, provided the body itself doesn't also have a margin. But this isn't always the case. You can in fact do a lot more than this with margins.
Margins can be applied to each edge individually, or to every edge at once.
You can specify the margin (which can be either positive or negative) in a number of units, but we'll use percentages, which give a fluid feel to a page. That is, when the page is resized, the margin resizes to maintain the same proportions.
The margin properties have their own editor.
To edit the margins of a statement
1. tab to the
First, let's create a margin around our whole page. To do this, we'll select the body, and apply a margin property to it.
You should be getting good at this, so here are a few hints, and reminders. Construct the rule, then see whether you got it right by checking at the end of the lesson.
Let's make it a sizable amount, say 10%, as we'll create a nice effect in a minute, and we'll need a bit of margin to achieve it.
Test your handy work. Save the style sheet then open the page in a browser.
It's a common typographical effect to draw attention to headings by the use of outdenting, so that they hang outside the main body of text. That's what I do in this tutorial, and that's what you'll learn to do now.
There are a number of ways you could go about doing this. One would be to create a negative left margin (margin-left) for headings, perhaps outdenting less depending on the level. You could also use the text-indent property with a negative value, to outdent headings.
Using either of the techniques I outlined above, create rules for several levels of heading that give outdenting to the headings on a page. You'll need a simple selector to select headings of level 1, level 2 and so on, and then a property to create the indent, using either a negative margin-left, or text-indent. Keep using the percentage unit. To create a negative value, simply use the small popup menu to the left of the value. For example, -10%.
Hint: you'll find the text-indent property on the Text Layout tab.
Answers at the bottom, as usual.
In a well designed publication, the first line of a paragraph may be indented, while subsequent lines in the paragraph are flush left with the margin. This emphasizes the beginning of a logical chunk of information.
The difference between the two approaches we just saw (margin versus text-indent) is that while applying a margin to an element effectively indents all of that element, applying the text-indent property only indents the first line.
To reinforce the last exercise, let's have each of our paragraphs begin with indented text. We'll use a positive, rather than negative text-indent value this time.
You should be getting the hang of this now, so we need a rule that selects paragraphs (the P element) then applies a text-indent of 10, 20 or more percent, to taste.
Answers at the bottom of the lesson.
There are many more page layout features to style sheets, which you can learn about from one of the more in-depth tutorials mentioned in the resources section. In this lesson we've learnt about the rudiments of working with neutral space on web pages.
Next we are going to take a look at a powerful, though a little tricky aspect of style sheets that effectively lets you create your own HTML elements (well, something that has a similar effect).
Here's what the Margin Editor should look like when you have the BODY statement selected in the list of statements.
BODY {margin: 10%}
H1 {text-indent: -10%}
H2 {text-indent: -6%}
H3 {text-indent: -4%}
P {text-indent: 5%}